<template>
	<el-dialog :title="title" v-model="curDialog" class="over-loading gzDialog" :width="width" destroy-on-close
		:close-on-press-escape="false" :close-on-click-modal="false">
		<div class="dialog-content">
			<slot></slot>
		</div>
		<template #footer class="dialog-footer">
			<div class="dialog-footer">
				<el-button @click="cancelClick">取消</el-button>
				<el-button type="primary" @click="confirmClick"> 确 定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: "gz-dialog",
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: "ADD"
			},
			width: {
				default: '500px'
			},
			title: {
				default: ''
			}
		},
		data() {
			return {
				curDialog: false
			}
		},
		methods: {
			open() {
				this.curDialog = true
			},
			close() {
				this.curDialog = false
			},
			confirmClick() {
				this.$emit("confirm")
			},
			cancelClick() {
				this.curDialog = false
				this.$emit("cancel")
			}
		}
	}
</script>

<style scoped lang="scss">
	.gzDialog {
		max-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.gzDialog .el-dialog {
		margin: 0px !important;
	}

	.dialog-content {
		max-height: calc(100vh - 200px);
		overflow-y: auto;
	}
</style>